<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
     在子组件中接受的参数,不要在子组件中直接修改,如果需要改变接收的参数可以通过在
     data中定义属性进行参数的接收,通过操作data中的实现业务的编写
-->
<div id="app">
  <blog :number="1"></blog>
</div>

<script>

    let blog = {
        template: `<div>
                    <h3>{{num}}</h3>
                    <button @click="addNumber">+1</button>
                   </div>`,
        data: function (){
            return{
                num:this.number
            }
        },
        props:['number'],
        methods: {
            addNumber(){
                this.num++
            }
        }
    }

    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            blog
        }
      })
</script>
</body>
</html>